<template>
	<view class="AccountForm" :style="{ height: formHigh + 'rpx' }">
		<u-form :model="form" ref="uForm">
			<u-form-item v-for="item in formData" :key="item.prop" :prop="item.prop" :border-bottom="false">
				<u-input v-if="item.type === 'primary'" :placeholder-style="placeholderStyle" v-model="form[item.prop]"
					:placeholder="$t(item.placeholder)" />
				<!-- 密码 -->
				<u-input v-if="item.type == 'password'" :clearable="false" :placeholder-style="placeholderStyle"
					type="password" v-model="form[item.prop]" :placeholder="$t(item.placeholder)" />
				<!-- 验证码 -->
				<u-input v-if="item.type == 'code'" :clearable="false" :placeholder-style="placeholderStyle"
					v-model="form[item.prop]" :placeholder="$t(item.placeholder)" />
				<slot v-if="item.type == 'code'" name="right">
					<u-toast ref="uToast"></u-toast>
					<u-verification-code unique-key="page-a" :seconds="seconds" ref="uCode"
						@change="codeChange"></u-verification-code>
					<div class="send" @tap="getCode">{{ $t(tips) }}</div>
				</slot>
			</u-form-item>
		</u-form>
	</view>
</template>

<script>
/**
 * @description 一般用于登录注册获取验证码表单
 * @property {Array} formData form 数据
 * @property {Object} rules 验证规则
 * @property {Number String} seconds 验证码倒计时时间
 * @property {String} placeholder-style input占位符样式
 * @property {String} form-high form高度
 * @property {String} code-type 验证码类型(根据后端配置修改) register=注册，code_login =验证码登录，forget=忘记密码，bind=绑定手机号，change=修改绑定手机号
 * @event {Function} getCode 获取验证码
 * @event {Function} emptyFrom 清空form
 */
export default {
	name: 'AccountForm',
	props: {
		formData: {
			type: Array,

			default() {
				return [];
			}
		},
		rules: {
			type: Object,

			default() {
				return {};
			}
		},
		seconds: {
			type: [Number, String],
			default: 60
		},
		placeholderStyle: {
			type: String,
			default: 'color:#666666;fontSize:26rpx;padding:0 20rpx;'
		},
		formHigh: {
			type: [Number, String],
			default: 600
		},
		codeType: {
			type: String,
			default: ''
		},
		customMadeForm: {
			type: Object,
			default() {
				return {};
			}
		},

	},
	data() {
		return {
			tips: '',
			refCode: null,
			form: {
				mobile: '',
				loginpass: '',
				type: '1' //0 会员端，1 业务员端
			}
		};
	},

	created() {
		// 指定验证规则
		this.$nextTick(function () {
			this.$refs.uForm.setRules(this.rules);
		});
	},
	watch: {
		customMadeForm: {
			handler(newValue, oldValue) {
				if (newValue !== oldValue) {
					this.form = { ...newValue, type: '1' };
				}
			},
			immediate: true
		}
	},
	methods: {
		submit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					// console.log(this.form);
					this.$emit('getFormData', this.form);
				} else {
					console.log('验证失败');
				}
			});
		},
		codeChange(text) {
			this.tips = text;
		},
		getCode() {
			if (this.$refs.uCode[0].canGetCode) {
				if (this.form.mobile == '') {
					this.$u.toast('请输入手机号码！');
					return;
				}
				uni.showLoading({
					title: '正在获取验证码'
				});
				setTimeout(() => {
					this.codeGet();
				}, 500);
			} else {
				this.$u.toast('倒计时结束后再发送');
			}
		},
		codeGet() {
			this.$u.api.send_sms({ mobile: this.form.mobile, type: this.codeType }).then(res => {
				console.log(res);
				// if (res.code === 1) {
				uni.hideLoading();
				// 这里此提示会被this.start()方法中的提示覆盖
				this.$u.toast('验证码已发送');
				// 通知验证码组件内部开始倒计时
				this.$refs.uCode[0].start();
				// }
			});
		},
		// 切换清空form
		emptyFrom() {
			this.form = { type: '1' };
		}
	}
};
</script>

<style lang="scss" scoped>
.send {
	color: #fd4834;
	font-size: 26rpx;
}

::v-deep .u-form-item--right {
	background-color: #f8f8f8;
	border-radius: 20rpx;
	padding: 10rpx;
}
</style>
